<template>
  <div class="home">
    <!-- <ul class="oul">
      <router-link active-class="active" tag="li" :to = "item.path" v-for="(item, index) in list" :key = "index">
        {{item.title}}
      </router-link>
    </ul>

    <div class="main">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>-->

    <!-- <div v-for="(item, index) in 3" :key = "index" v-show="flag" class="box"></div> -->
    <!-- <div v-show="flag" class="box"></div>
      <br/>
    <div v-show="flag" class="box"></div>-->

    <!-- <ul id="oul" ref="oul">
      <div v-abc="10">12</div>
    </ul>-->

    <svg width="100%" height="100%">
      <defs>
        <linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(2, 10, 255);
      stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0, 200, 255);
      stop-opacity:1" />
        </linearGradient>
      </defs>
    </svg>

    <div class="el-progress-circle" style="height: 126px; width: 126px;">
      <svg viewBox="0 0 100 100">
        <defs>
          <linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(2, 0, 255);
      stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(0, 200, 255);
      stop-opacity:1" />
          </linearGradient>
        </defs>
        <path
          d="
        M 50 50
        m 0 -47
        a 47 47 0 1 1 0 94
        a 47 47 0 1 1 0 -94
        "
          stroke="#e5e9f2"
          stroke-width="4.8"
          fill="none"
          class="el-progress-circle__track"
          style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"
        />
        <path
          d="
        M 50 50
        m 0 -47
        a 47 47 0 1 1 0 94
        a 47 47 0 1 1 0 -94
        "
          stroke="url(#blue)"
          fill="none"
          stroke-linecap="round"
          stroke-width="4.8"
          class="el-progress-circle__path"
          style="stroke-dasharray: 185.717px, 295.31px;stroke-dashoffset: 0px;transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;/* stroke: rgb(1, 187, 261); */"
        />
      </svg>
    </div>
    <!-- <button @click="setFlag">显示隐藏</button> -->
    <!-- <el-progress type="circle" :percentage="0"></el-progress> -->
    <el-progress type="circle" :percentage="25"></el-progress>
    <!-- <el-progress type="circle" :percentage="100" status="success"></el-progress>
    <el-progress type="circle" :percentage="70" status="warning"></el-progress>
    <el-progress type="circle" :percentage="50" status="exception"></el-progress>-->
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      list: [
        {
          title: "首页",
          path: "/home/myhome",
        },
        {
          title: "列表",
          path: "/home/list",
        },
        {
          title: "我的",
          path: "/home/my",
        },
      ],
      flag: true,
    };
  },
  methods: {
    setFlag() {
      this.flag = !this.flag;
    },
  },
  directives: {
    // 'abc': (el, value) => {
    //   console.log(document.getElementById('oul'))
    // }

    abc: function (el, value) {
      // console.dir(el)
      console.log(document.getElementsByClassName("home")[0]);
      for (var i = 0; i < value.value; i++) {
        let newEl = document.createElement(el.localName);
        // let newOl = document.getElementById('oul')
        newEl.innerHTML = el.innerHTML;

        // console.dir(this.$refs)
        // document.getElementById('oul').appendChild(newEl)
      }
      // if (value.value) {
      //   el.style.display = 'block'
      // } else {
      //   el.style.display = 'none'
      // }
    },
  },
};
</script>

<style lang="scss">
</style>
